import { Button, Checkbox, Form, Input, message, Alert } from 'antd';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import axios from './../utils/axios';
import './../css/Register.css'

const Register = () => {
  const navigate = useNavigate();

  const onFinish = async (values) => {
    let { no, username, password, RePassword } = values;

    if (password === RePassword) {
      try {
        let result = await axios.post("/users/add", { no, username, password });
        if (result.data.code === 0) {
          message.success("成功");
          navigate("/");
        } else {
          message.info(result.data.message);
        }
      } catch (e) {
        message.error("服务器出错，请联系管理员");
        console.log(e);
      }
    } else {
      message.error("两次密码输入不一致");
    }
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
      <div className="register-container"> {/* 添加一个注册容器 */}
      <div className="register-wrapper"> {/* 添加一个注册包装器 */}
        <Form
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          style={{
            maxWidth: 600,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          className="register-form"
        >
          <div className="register-title-container"> {/* 添加一个标题容器 */}
            <h2 className='regTitle'>注册</h2>
          </div>
          <Form.Item
            label="工号"
            name="no"
            rules={[
              {
                required: true,
                message: '请输入你的工号',
              },
            ]}
            
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              {
                required: true,
                message: '请输入你的用户名!',
              },
            ]}
          >

            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="确认密码"
            name="RePassword"
            rules={[
              {
                required: true,
                message: '请输入确认密码!',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>


          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button className="register-button" htmlType="submit">
              注册
            </Button>
          </Form.Item>
        </Form>
        </div>
      </div>
  );
};

export default Register;